<template>
    <div>
        <!-- 头部导航 -->
        <div class="ls-card">
            <el-page-header @back="$router.go(-1)" :content="!identity?'新增小票模版':'编辑小票模版'" />
        </div>

        <div class="flex col-top">

            <div class="ls-card m-t-24 m-b-60 m-r-24">
                <div class="title">{{$t('基本信息')}}</div>

                <el-form ref="printData" style="width:500px" :hide-required-asterisk="false" :rules="rules"
                    class="m-l-24" :model="printData" label-width="120px">
                    <el-form-item :label="$t('模版名称')" prop="template_name" :label-position="right">
                        <el-input v-model="printData.template_name" :placeholder="$t('请输入模版名称')" class="ls-input"></el-input>
                    </el-form-item>

                    <el-form-item :label="$t('小票名称')" prop="ticket_name" :label-position="right">
                        <el-input v-model="printData.ticket_name" :placeholder="$t('请输入小票名称')" class="ls-input"></el-input>
                    </el-form-item>

                    <el-form-item :label="$t('商城名称')" :label-position="right" required>
                        <el-switch v-model="printData.show_shop_name" :active-value="1" :inactive-value="0"
                            :active-color="styleConfig.primary" inactive-color="#f4f4f5" />
                        <span class="muted m-l-20">{{$t('隐藏和显示商城名称，默认显示')}}</span>
                    </el-form-item>

                    <el-form-item :label="$t('自提门店')" :label-position="right" required>
                        <el-checkbox :true-label="1" :false-label="0" v-model="printData.selffetch_shop.shop_name">{{$t('自提门店')}}
                        </el-checkbox>
                        <el-checkbox :true-label="1" :false-label="0" v-model="printData.selffetch_shop.contacts">{{$t('联系人')}}
                        </el-checkbox>
                        <el-checkbox :true-label="1" :false-label="0" v-model="printData.selffetch_shop.shop_address">
                            {{$t('门店地址')}}
                        </el-checkbox>
                        <span class="desc">{{$t('门店自提时，勾选需要显示的门店信息')}}</span>
                    </el-form-item>

                    <el-form-item :label="$t('买家留言')" :label-position="right" required>
                        <el-switch v-model="printData.show_buyer_message" :active-value="1" :inactive-value="0"
                            :active-color="styleConfig.primary" inactive-color="#f4f4f5" />
                        <span class="muted m-l-20">{{$t('隐藏和显示买家留言，默认显示')}}</span>
                    </el-form-item>

                    <el-form-item :label="$t('收货信息')" :label-position="right" required>
                        <el-checkbox :true-label="1" :false-label="0" v-model="printData.consignee_info.name">{{$t('收货人')}}
                        </el-checkbox>
                        <el-checkbox :true-label="1" :false-label="0" v-model="printData.consignee_info.mobile">{{$t('联系方式')}}
                        </el-checkbox>
                        <el-checkbox :true-label="1" :false-label="0" v-model="printData.consignee_info.address">{{$t('收货地址')}}
                        </el-checkbox>
                        <span class="desc">{{$t('门店自提时，勾选需要显示的门店信息')}}</span>
                    </el-form-item>

                    <el-form-item :label="$t('二维码')" :label-position="right" required>
                        <el-switch v-model="printData.show_qrcode" :active-value="1" :inactive-value="0"
                            :active-color="styleConfig.primary" inactive-color="#f4f4f5" />
                        <span class="muted m-l-20">{{$t('关闭和开启打印小票尾部二维码，默认关闭')}}</span>
                    </el-form-item>

                    <el-form-item :label="$t('二维码链接')" :label-position="right">
                        <el-input v-model="printData.qrcode_content" :placeholder="$t('请输入二维码链接')" class="ls-input"></el-input>
                    </el-form-item>

                    <el-form-item :label="$t('二维码名称')" :label-position="right">
                        <el-input v-model="printData.qrcode_name" :placeholder="$t('请输入二维码名称')" class="ls-input"></el-input>
                    </el-form-item>

                    <el-form-item :label="$t('底部信息')" prop="bottom" :label-position="right" required>
                        <el-input v-model="printData.bottom" :placeholder="$t('谢谢惠顾，欢迎下次光临')" class="ls-input"></el-input>
                    </el-form-item>

                </el-form>
            </div>

            <div class="ls-card m-b-60 m-t-24">
                <div class="title">{{$t('小票预览')}}</div>
                <div class="phone">
                    <div class="bb flex row-center sm m-t-5 p-b-12">{{printData.ticket_name||$t('小票名称')}}</div>
                    <div v-if="printData.show_shop_name" class="bb flex row-center m-t-12 xl p-b-12">{{$t('商城名称')}}</div>
                    <div class="sm bb p-l-10">
                        <div class="m-t-12">{{$t('订单编号')}}: MWE20012345738754657834</div>
                        <div class="m-t-12">{{$t('支付方式')}}: 微信支付</div>
                        <div class="m-t-12 p-b-12">{{$t('配送方式')}}: 门店自提</div>
                    </div>
                    <div class="bb p-l-10 p-r-10">
                        <div class="m-t-12 flex row-between">
                        <div>{{$t('商品名称')}}</div>
                        <div>{{$t('数量')}}</div>
                        <div>{{$t('金额')}}</div>
                    </div>
                    <div class="m-t-12 flex row-between">
                        <div>{{$t('男子运动鞋')}}</div>
                        <div>2</div>
                        <div>¥2987</div>
                    </div>
                    <div class="m-t-12 flex row-between">
                        <div>{{$t('白色休闲鞋')}}</div>
                        <div>4</div>
                        <div>¥2463</div>
                    </div>
                    <div class="m-t-12 p-b-12  flex row-between">
                        <div>{{$t('运费')}}</div>
                        <div>¥5.00</div>
                    </div>
                    </div>
                    <div class="p-l-10 p-r-10 bb">
                        <div class="m-t-12 flex row-between">
                        <div>{{$t('订单原价')}}</div>
                        <div>¥5455.00</div>
                    </div>
                    <div class="m-t-12 flex row-between">
                        <div>{{$t('优惠金额')}}</div>
                        <div>¥0.00</div>
                    </div>
                    <div class="m-t-12 p-b-12  flex row-between">
                        <div>{{$t('实付金额')}}</div>
                        <div>¥5455.00</div>
                    </div>
                    </div>
                    <div class="bb p-b-12 p-l-10 p-r-10" v-if="handleShopInfo">
                        <div class="bold m-t-12 weight-500">{{$t('门店信息')}}</div>
                        <div class="m-t-12" v-if="printData.selffetch_shop.shop_name">
                            {{$t('自提门店')}}: 商业街店铺
                        </div>
                        <div class="m-t-12" v-if="printData.selffetch_shop.contacts">
                            {{$t('联系人')}}: 刘先生
                        </div>
                        <div class="m-t-12" v-if="printData.selffetch_shop.shop_address">
                            {{$t('门店地址')}}: 广东省番禺区 小店街
                        </div>
                    </div>
                    <div class="bb p-b-12 p-l-10 p-r-10" v-if="handleUserInfo">
                        <div class="bold m-t-12 weight-500">{{$t('买家信息')}}</div>
                        <div class="m-t-12" v-if="printData.consignee_info.name">
                            {{$t('收货人')}}: 米先生
                        </div>
                        <div class="m-t-12" v-if="printData.consignee_info.mobile">
                            {{$t('联系方式')}}: 18778786555
                        </div>
                        <div class="m-t-12 " v-if="printData.consignee_info.address">
                            {{$t('收货地址')}}: 山西省 太原市 小区店 创业街
                        </div>
                    </div>
                    <div class="m-t-12 p-b-12 bb p-l-10" v-if="printData.show_buyer_message">
                        {{$t('买家留言')}}: 请发申通快递，谢谢
                    </div>
                    
                    <div class="flex row-center bb m-t-12 p-b-12" v-if="printData.show_qrcode">
                        <img style="width: 100px; height: 100px" src="@/assets/images/qr_code.png" />
                    </div>

                    <div class="m-t-12 p-b-5 flex row-center">
                        {{printData.bottom}}
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部保存或取消 -->
        <div class="bg-white ls-fixed-footer">
            <div class="row-center flex m-t-12">
                <el-button size="small" @click="$router.go(-1)">{{$t('取消')}}</el-button>
                <el-button size="small" type="primary" @click="onSubmit('printData')">保存</el-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts">

 import  i18n from '@/plugins/i18n' 
import { Component, Vue } from "vue-property-decorator";
import {
    apiAddTemplate,
    apiEditTemplate,
    apiTemplateDetail,
} from "@/api/marketing/print";
import {
    PaymentConfig_Req,
    PaymentConfigGet_Req,
} from "@/api/setting/payment.d";
import MaterialSelect from "@/components/material-select/index.vue";
@Component({
    components: {
        MaterialSelect,
    },
})
export default class PrintEdit extends Vue {
    /** S Data **/

    identity: Number = 1;

    // 打印机设置的数据
    printData: any = {
        template_name: "", //	是	string	模板名称
        ticket_name: "", //	是	string	小票名称
        show_shop_name: 1, //	是	integer	是否显示商城名称 0-否 1-是
        template_id: 0, //	是	integer	模板id
        selffetch_shop: {
            shop_name: 1,
            contacts: 1,
            shop_address: 1,
        }, //	是	object	自提门店信息
        show_buyer_message: 1, //	是	integer	是否显示买家留言 0-否 1-是
        consignee_info: {
            name: 1,
            mobile: 1,
            address: 1,
        }, //	是	object	收货人信息
        show_qrcode: 1, //	是	integer	是否显示二维码 0-否 1-是
        bottom: "谢谢惠顾，欢迎下次光临", //	是	string	底部信息
        qrcode_name: "", //	否	string	二维码名称
        qrcode_content: "", //	否	string	二维码内容
    };

    // 表单验证
    rules: any = {
        template_name: [
            { required: true, message: i18n.t('请输入打印机名称'), trigger: "blur" },
        ],
        ticket_name: [
            { required: true, message: i18n.t('输入小票名称'), trigger: "blur" },
        ],
        bottom: [
            { required: true, message: i18n.t('请输入底部信息'), trigger: "blur" },
        ],
        qrcode_content: [
            { required: true, message: i18n.t('请输入二维码链接'), trigger: "blur" },
        ],
        qrcode_name: [
            { required: true, message: i18n.t('请输入二维码名称'), trigger: "blur" },
        ],
    };

    /** E Data **/

    /** S Methods **/
    async getTemplateDetail() {
        const res = await apiTemplateDetail({ id: this.identity });
        this.printData = res;
    }

    // 点击表单提交
    onSubmit(formName: string) {
        // 验证表单格式是否正确
        const refs = this.$refs[formName] as HTMLFormElement;
        refs.validate((valid: boolean): any => {
            if (!valid) return;
            if (!this.identity) this.handleTemplateAdd();
            else this.handleTemplateEdit();
        });
    }

    // 添加模版
    async handleTemplateAdd() {
        const params = this.printData;
        await apiAddTemplate({ ...params });
        this.$router.back();
    }

    // 编辑模版
    handleTemplateEdit() {
        const params = this.printData;
        const id: number = this.identity as number;
        apiEditTemplate({ ...params, id })
            .then(() => {
                setTimeout(() => this.$router.go(-1), 500);
            })
            .catch(() => {
                this.$message.error(i18n.t('编辑失败!'));
            });
    }

    /** E Methods **/

    /** S Life Cycle **/
    created() {
        const query: any = this.$route.query;
        this.identity = query.id;
        if (this.identity) this.getTemplateDetail();
    }
    /** E Life Cycle **/

    get handleShopInfo() {
        let arr = []
        let print = this.printData.selffetch_shop;
        for (const key in print) {
            arr.push(print[key])
        }
        const res = arr.find(item => item == 1);
        return res==undefined?false:true
    }

    get handleUserInfo() {
        let arr = []
        let print = this.printData.consignee_info;
        for (const key in print) {
            arr.push(print[key])
        }
        const res = arr.find(item => item == 1);
        return res==undefined?false:true
    }
}
</script>

<style lang="scss" scoped>
.ls-input {
    width: 280px;
}

.desc {
    color: #999999;
    display: block;
    height: 20px;
    line-height: 30px;
}

.title {
    font-size: 14px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #E5E5E5;
}

.phone {
    margin: 0 auto;
    width: 300px;
    padding: 10px 0;
    border: 1px solid #E5E5E5;
    .bb {
        border-bottom: 1px dashed #E5E5E5;
    }
}
</style>
